<!DOCTYPE HTML>
<html ng-app="myApp">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>ngAnimate插件3</title>
    <script src="../../lib/jquery/jquery-1.10.2.js"></script>
    <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
    <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular-animate.min.js"></script>
    <style type="text/css">
    .box{transition:1s all;}
    /*显示操作*/
    .box.ng-enter{opacity:0;}
    .box.ng-enter-active{opacity:1;}
    /*隐藏操作*/
    .box.ng-leave{display:none;}
    .box.ng-enter-stagger{animation-delay:0.1s;}
</style>
</head>
<body>
<div ng-controller="Aaa">
    <input type="text" ng-model="name" ng-keyup="change(name)">
    <input type="button" ng-click="change(name)" value="搜索">
    <ul>
        <li class="box" ng-repeat="d in data">{{d}}</li>
    </ul>
</div>
<script type="text/javascript">
    var m1 = angular.module('myApp',['ngAnimate']);
    m1.controller('Aaa',['$scope','$http','$timeout',function($scope,$http,$timeout){
        var timer = null;
        $scope.data = [];
        $scope.change = function(name){
            $timeout.cancel(timer);
            timer = $timeout(function(){
                $http({
                    method : 'JSONP',
                    url : 'https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd='+name+'&cb=JSON_CALLBACK',
                }).success(function(data,state,headers,config){
                    console.log(data);
                    $scope.data = data.s;
                }).error(function(data){
                    console.log(data);
                });
            },500);
        };
    }]);
</script>
</body>
</html>